<template>
    <div class="indexcontent">
        <pageHeader ref="header"></pageHeader>
        <div class="section option-section">
            <div class="section-main option-main">
                <div class="pagerouter">
                    <router-link tag="a" :to="{name:'index'}" class="pagerouter-item pagerouter-a">首页</router-link>
                    <span class="pagerouter-arrow">></span>
                    <router-link tag="a" :to="{name:'Ordercenter'}" class="pagerouter-item pagerouter-a">合同中心
                    </router-link>
                    <span class="pagerouter-arrow">></span>
                    <span class="pagerouter-item">云签授权</span>
                </div>
                <div class="option-wrap">
                    <div class="option-tl">
                        <div class="option-tlsm">安心签产品签署授权</div>
                        <div class="step-wrap">
                            <div class="clearfix step">
                                <div class="step-item step-first" :class="[stepActive>0?'step-active':'']">
                                    <div class="step-num">1</div>
                                    <div class="step-line"></div>
                                    <div class="step-words">操作身份确定</div>
                                </div>
                                <div class="step-item step-defaultitem" :class="[stepActive>1?'step-active':'']">
                                    <div class="step-num">2</div>
                                    <div class="step-line"></div>
                                    <div class="step-words">打款认证</div>
                                </div>
                                <div class="step-item step-defaultitem" :class="[stepActive>2?'step-active':'']">
                                    <div class="step-num">3</div>
                                    <div class="step-line"></div>
                                    <div class="step-words">法人授权确认</div>
                                </div>
                                <div class="step-item step-last" :class="[stepActive>3?'step-active':'']">
                                    <div class="step-num">
                                        <img src="@/assets/images/u281.png" alt="" v-if="stepActive<=3">
                                        <img src="@/assets/images/u281_selected.png" alt="" v-else>
                                    </div>
                                    <div class="step-line"></div>
                                    <div class="step-words">完成</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="option-bd">
                        <swiper :options="swiperOption" ref="mySwiper">
                            <!-- slides -->
                            <!--<swiper-slide><img :src="bannerList[0].imgPath" alt="" style="width: 100%;display: block;">-->
                            <!--</swiper-slide>-->
                            <swiper-slide class="swiper-no-swiping">
                                <div class="option-navs">
                                    <div class="option-navs-item" @click="isLegal = true" :class="[isLegal?'active':'']">法人</div>
                                    <div class="option-navs-item" @click="isLegal = false" :class="[isLegal?'':'active']">不是法人</div>
                                </div>
                                <div class="clearfix option-float" v-if="!isLegal">
                                    <div class="option-fleft">
                                        <Form :model="chargeForm" :label-width="240">
                                            <FormItem label="经办人姓名">
                                                <Input v-model="chargeForm.inputName" placeholder="请输入经办人姓名"></Input>
                                            </FormItem>
                                            <FormItem label="经办人证件号">
                                                <Input v-model="chargeForm.inputNum" placeholder="请输入经办人证件号"></Input>
                                            </FormItem>
                                            <FormItem label="经办人手机号">
                                                <Input v-model="chargeForm.inputPhone" placeholder="请输入经办人手机号"></Input>
                                            </FormItem>
                                            <FormItem label="短信验证码">
                                                <Input v-model="chargeForm.inputCode" placeholder="请输入验证码"></Input>
                                                <div class="optiongetcode" :class="[readyget?'ungetcode':'']"
                                                     @click="tapGetCode">{{codeWords}}
                                                </div>
                                            </FormItem>
                                        </Form>
                                        <!--                                        <div class="clearfix option-inpgroup">-->
                                        <!--                                            <div class="option-inplabel">客户姓名</div>-->
                                        <!--                                            <div class="option-inpitem"><input type="text" placeholder="请输入您的姓名"></div>-->
                                        <!--                                        </div>-->
                                        <!--                                        <div class="clearfix option-inpgroup">-->
                                        <!--                                            <div class="option-inplabel">身份证号码</div>-->
                                        <!--                                            <div class="option-inpitem"><input type="text" placeholder=""></div>-->
                                        <!--                                        </div>-->
                                        <!--                                        <div class="clearfix option-inpgroup">-->
                                        <!--                                            <div class="option-inplabel">身份证有效日期</div>-->
                                        <!--                                            <div class="option-inpitem"><input type="text" placeholder="日期选择"></div>-->
                                        <!--                                        </div>-->
                                    </div>
                                    <div class="option-fright">
                                        <div class="option-fright-tl">身份证上传</div>
                                        <div class="personal-idcard">
                                            <div class="personal-idcarditem">
                                                <Upload
                                                        ref="upload"
                                                        :show-upload-list="false"
                                                        :on-success="handleSuccess"
                                                        :format="['jpg','jpeg','png']"
                                                        :max-size="2048"
                                                        :on-format-error="handleFormatError"
                                                        :on-exceeded-size="handleMaxSize"
                                                        :before-upload="handleBeforeUpload"
                                                        multiple
                                                        type="select"
                                                        action="//jsonplaceholder.typicode.com/posts/"
                                                        style="display: inline-block;width:150px;">
                                                    <div>
                                                        <img src="@/assets/images/per-icon1.png" alt="">
                                                    </div>
                                                </Upload>
                                            </div>
                                            <div class="personal-idcarditem"
                                                 style="border-top: 1px dashed #ccc;margin-top: 10px;width: 170px;">
                                                <Upload
                                                        ref="upload"
                                                        :show-upload-list="false"
                                                        :on-success="handleSuccess"
                                                        :format="['jpg','jpeg','png']"
                                                        :max-size="2048"
                                                        :on-format-error="handleFormatError"
                                                        :on-exceeded-size="handleMaxSize"
                                                        :before-upload="handleBeforeUpload"
                                                        multiple
                                                        type="select"
                                                        action="//jsonplaceholder.typicode.com/posts/"
                                                        style="display: inline-block;width:150px;">
                                                    <div>
                                                        <img src="@/assets/images/per-icon2.png" alt="">
                                                    </div>
                                                </Upload>
                                            </div>
                                        </div>
                                        <div class="person-iddes">
                                            <div>• 必须为清晰、完整的彩色原件扫描件或数码照</div>
                                            <div>• 仅支持.jpg .bmp .png .gif的图片格式,大小不超过4M</div>
                                            <div>• 必须在有效期内且年检章齐全</div>
                                            <div>• 必须为中国大陆工商局颁发</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="optionbtnwrap">
                                    <div class="option-errtips" v-if="errtipshow">输入错误</div>
                                    <button type="button" class="option-next" @click="toStepTwo">下一步</button>
                                </div>
                            </swiper-slide>
                            <swiper-slide class="swiper-no-swiping">
                                <div class="forgetsection" v-if="stepTwoFinish">
                                    <div class="forgetsection-stepone">
                                        <div class="stepone-phone">已绑定的银行账户：622****1688 工商银行</div>
                                        <div class="stepone-des">我们已向您绑定得银行账户打款0.01元，请回填备注中得验证码</div>
                                        <div class="stepone-other">
                                            <div class="stepone-inp">
                                                <div class="loginpage-inpgroup">
                                                    <input type="text" placeholder="短信验证码">
                                                    <button type="button" class="getcode"
                                                            :class="[readyget?'ungetcode':'']"
                                                            @click="tapGetCode">
                                                        {{codeWords}}
                                                    </button>
                                                    <div class="reg-errcode"><img src="@/assets/images/login-icon4.png"
                                                                                  alt="">已发送，请查收手机短信
                                                    </div>
                                                    <div class="reg-err"><img src="@/assets/images/erricon.png" alt="">{{codeErr}}
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="stepone-btn">
                                                <button type="button" @click="toStepThree">下一步</button>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                                <div class="clearfix option-float" v-else>
                                    <div class="option-fleft" style="border-right: 1px solid #1d8fe1;">
                                        <Form :model="companyForm" :label-width="240">
                                            <FormItem label="企业名称">
                                                <Input v-model="companyForm.companyName" placeholder="请输入企业名称"></Input>
                                            </FormItem>
                                            <FormItem label="开户银行名称">
                                                <Input v-model="companyForm.companyBlankName" placeholder="请输入开户银行名称"></Input>
                                            </FormItem>
                                            <FormItem label="企业银行账号">
                                                <Input v-model="companyForm.companyBlankAccount" placeholder="请输入企业银行账号"></Input>
                                            </FormItem>
                                            <FormItem label="开户银行地区">
                                                <Cascader :data="cnCity" v-model="companyForm.blankArea"></Cascader>
                                            </FormItem>
                                            <FormItem label="详细支行全称">
                                                <Input v-model="companyForm.blankDetailName" placeholder="请输入详细支行全称"></Input>
                                            </FormItem>
                                        </Form>
                                        <!--                                        <div class="clearfix option-inpgroup">-->
                                        <!--                                            <div class="option-inplabel">客户姓名</div>-->
                                        <!--                                            <div class="option-inpitem"><input type="text" placeholder="请输入您的姓名"></div>-->
                                        <!--                                        </div>-->
                                        <!--                                        <div class="clearfix option-inpgroup">-->
                                        <!--                                            <div class="option-inplabel">身份证号码</div>-->
                                        <!--                                            <div class="option-inpitem"><input type="text" placeholder=""></div>-->
                                        <!--                                        </div>-->
                                        <!--                                        <div class="clearfix option-inpgroup">-->
                                        <!--                                            <div class="option-inplabel">身份证有效日期</div>-->
                                        <!--                                            <div class="option-inpitem"><input type="text" placeholder="日期选择"></div>-->
                                        <!--                                        </div>-->
                                    </div>
                                    <div class="option-fright" style="border-left: 0;">
                                        <div class="option-fright-tl">企业基本账户上传</div>
                                        <div class="personal-idcard">
                                            <div class="personal-idcarditem">
                                                <Upload
                                                        ref="upload"
                                                        :show-upload-list="false"
                                                        :on-success="handleSuccess"
                                                        :format="['jpg','jpeg','png']"
                                                        :max-size="2048"
                                                        :on-format-error="handleFormatError"
                                                        :on-exceeded-size="handleMaxSize"
                                                        :before-upload="handleBeforeUpload"
                                                        multiple
                                                        type="select"
                                                        action="//jsonplaceholder.typicode.com/posts/"
                                                        style="display: inline-block;width:150px;">
                                                    <div>
                                                        <img src="@/assets/images/per-icon4.png" alt=""
                                                             style="margin-bottom: 15px;">
                                                    </div>
                                                </Upload>

                                            </div>
                                            <!--                                            <div class="personal-idcarditem"-->
                                            <!--                                                 style="border-top: 1px dashed #ccc;margin-top: 10px;width: 170px;">-->
                                            <!--                                                <img src="@/assets/images/per-icon2.png" alt="">-->
                                            <!--                                            </div>-->
                                        </div>
                                        <div class="person-iddes">
                                            <div>• 必须为清晰、完整的彩色原件扫描件或数码照</div>
                                            <div>• 仅支持.jpg .bmp .png .gif的图片格式,大小不超过4M</div>
                                            <div>• 必须在有效期内且年检章齐全</div>
                                            <div>• 必须为中国大陆工商局颁发</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="optionbtnwrap" v-if="!stepTwoFinish">
                                    <div class="option-errtips" v-if="errtipshow">该账户已存在</div>
                                    <button type="button" class="option-next" @click="showStepTwo">下一步</button>
                                </div>
                            </swiper-slide>
                            <swiper-slide class="swiper-no-swiping">
                                <div class="option-qrcode" @click="toStepFour">
                                    <img src="@/assets/images/u90.png" alt="">
                                    <div>请用微信扫描二维码进行人脸认证</div>
                                </div>
                            </swiper-slide>
                            <swiper-slide class="swiper-no-swiping">
                                <div class="option-success">
                                    <img src="@/assets/images/u1009.png" alt="" class="option-success-img">
                                    <div class="option-success-words">恭喜你，授权成功</div>
                                    <div class="option-success-tips">点击下方按钮前往签约</div>
                                    <div class="option-success-btn">
                                        <router-link tag="button" :to="{name:'Ordersign'}" type="button">前往签署合同
                                        </router-link>
                                    </div>
                                </div>
                            </swiper-slide>
                            <!--                        <swiper-slide v-for="(item,index) in bannerList" :key="index" class="swiper-no-swiping">-->
                            <!--                            ssssss{{item}}-->
                            <!--                        </swiper-slide>-->
                            <!-- Optional controls -->
                            <!--                        <div class="swiper-pagination" slot="pagination"></div>-->
                        </swiper>
                    </div>
                    <div class="option-ft">

                    </div>
                </div>
            </div>
        </div>
        <pageFooter/>
    </div>
</template>

<script>
    import pageHeader from '@/components/pageHeader'
    import pageFooter from '@/components/pageFooter'

    var json = require('@/lib/cncity/provinces.json');
    import {mapMutations} from 'vuex'

    let timeInterval = null;
    let routerInterval = null;
    export default {
        name: "cloudpage",
        components: {
            pageHeader,
            pageFooter
        },
        data() {
            return {
                isLegal: true,
                swiperOption: {
                    autoplay: false,
                    loop: false,
                    noSwiping: true,
                    // pagination: '.swiper-pagination'
                },
                bannerList: [1, 2, 3, 4, 5],
                routerTime: 5,
                stepActive: 1,
                errtipshow: false,
                chargeForm: {
                    inputName: '',
                    inputNum:'',
                    inputPhone: '',
                    inputCode: '',
                },
                companyForm: {
                    companyName: '',
                    companyBlankName: '',
                    companyBlankAccount: '',
                    blankArea: [],
                    blankDetailName: '',
                },
                readyget: false,
                codeWords: '获取验证码',
                time: 10,
                cnCity: json.data,
                value1: '',
                selectAuthorModal: false,
                codeErr: '验证码错误',
                stepTwoFinish: false
            }
        },
        created() {

        },
        computed: {
            swiper() {
                return this.$refs.mySwiper.swiper;
            }
        },

        mounted() {

        },
        beforeDestroy() {
            clearInterval(timeInterval)
            clearInterval(routerInterval)
        },
        methods: {
            tapGetCode() {
                if (!this.readyget) {
                    timeInterval = setInterval(() => {
                        if (this.time > 0) {
                            this.readyget = true;
                            this.time = this.time - 1;
                            this.codeWords = this.time + '秒后可重发'
                            console.log(this.time)
                        } else {
                            clearInterval(timeInterval)
                            this.time = 10;
                            this.codeWords = '获取验证码'
                            this.readyget = false;
                        }
                    }, 1000)
                }
            },
            toStepTwo() {
                this.swiper.slideTo(1, 1000, false)
                this.stepActive = 2
            },
            showStepTwo() {
                this.stepTwoFinish = true
            },
            toStepThree() {
                this.swiper.slideTo(2, 1000, false)
                this.stepActive = 3
            },
            toStepFour() {
                this.swiper.slideTo(3, 1000, false)
                this.stepActive = 4
                // routerInterval = setInterval(() => {
                //     if (this.routerTime > 0) {
                //         this.routerTime = this.routerTime - 1;
                //     } else {
                //         clearInterval(timeInterval)
                //         this.$router.push({
                //             name:'Ordersign'
                //         })
                //     }
                // }, 1000)
            },
            tapToSelect() {
                this.selectAuthorModal = true;
            },
            closeRegModal() {
                this.selectAuthorModal = false;
            },
            handleSuccess(res, file) {
                file.url = 'https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar';
                file.name = '7eb99afb9d5f317c912f08b5212fd69a';
            },
            handleFormatError(file) {
                this.$Notice.warning({
                    title: 'The file format is incorrect',
                    desc: 'File format of ' + file.name + ' is incorrect, please select jpg or png.'
                });
            },
            handleMaxSize(file) {
                this.$Notice.warning({
                    title: 'Exceeding file size limit',
                    desc: 'File  ' + file.name + ' is too large, no more than 2M.'
                });
            },
            handleBeforeUpload() {
                // const check = this.uploadList.length < 5;
                // if (!check) {
                //     this.$Notice.warning({
                //         title: 'Up to five pictures can be uploaded.'
                //     });
                // }
                // return check;
            }
        }
    }
</script>

<style scoped lang="scss">

</style>

